<template>
  <div class="mine" v-if="vuexUserInfo.token">
    <!-- 头部 -->
    <NavigationBar title="我的"></NavigationBar>
    <div class="main">
      <!-- 我的信息-->
      <div class="mydata">
        <img src="https://mall.roborock.com/h5/static/img/default-avatar.4e391d11.png" alt="">
        <div class="phone">{{ vuexUserInfo.user.mobile }}</div>
      </div>
      <!-- 订单 -->
      <div class="order">
        <router-link :to="{name:'order',params:{type:1}}">
          <van-badge :content="badge.created>0?badge.created:''">
            <img src="https://files.roborock.com/mini_img/profile/pay-order.png" alt="">
            <span>待付款</span>
          </van-badge>
        </router-link>
        <router-link :to="{name:'order',params:{type:2}}">
          <van-badge :content="badge.deliveried>0?badge.deliveried:''">
            <img src="https://files.roborock.com/mini_img/profile/rec-order.png" alt="">
            <span>待收货</span>
          </van-badge>
        </router-link>
        <router-link :to="{name:'afterSales'}">
          <van-badge :content="badge.refund>0?badge.refund:''">
            <img src="https://files.roborock.com/mini_img/profile/refund-order.png" alt="">
            <span>退换/售后</span>
          </van-badge>
        </router-link>
        <router-link :to="{name:'order',params:{type:0}}">
          <img src="https://files.roborock.com/mini_img/profile/my-order.png" alt="">
          <span>全部订单</span>
        </router-link>
      </div>
      <!-- 优惠券 -->
      <van-cell-group class="team team1">
        <van-cell title="优惠券" is-link :to="{name:'coupon'}"/>
        <van-cell title="我的奖品" is-link :to="{name:'prize'}"/>
      </van-cell-group>
      <!-- 我的奖品 收货地址 -->
      <van-cell-group class="team team2">
        <van-cell title="收藏" is-link :to="{name:'collect'}"/>
        <van-cell title="收货地址" is-link :to="{name:'my-address'}"/>
      </van-cell-group>
      <!-- 产品百科 联系客服 -->
      <van-cell-group class="team team3">
        <van-cell title="产品百科" is-link to=""/>
        <van-cell title="联系客服" is-link to=""/>
      </van-cell-group>
      <!-- 退出登录 -->
      <van-button class="sign-out" type="default" @click="signOut">退出登录</van-button>
    </div>
  </div>
</template>

<script>
import {Dialog} from "vant";

export default {
  name: "Mine",
  data() {
    return {
      badge: {}
    }
  },
// 侦听器
  watch: {},
// 计算属性
  computed: {},
// 事件
  methods: {
    signOut() {
      Dialog.confirm({
        title: '提示',
        message: '确定退出登录吗？',
      }).then(() => {
        this.vuexUserInfo = {}
        this.gotoPage("home")
      })
    }
  },
// 生命周期
  created() {
  },
  mounted() {
    this.$ajax.getBadge().then(res => {
      if (res.error_code === 0) {
        this.badge = res.subtotal
      } else {
        this.$toast(res.error_desc)
      }
      // console.log(res)
      // console.log(this.badge)
    })
  },
//  守卫
  beforeRouteEnter(to, from, next) {
    next(vm => {
      if (!vm.vuexUserInfo.token) {
        vm.$router.replace({
          name: 'login'
        })
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.mine {
  width: 100%;

  .main {
    width: 100%;
    padding: 16px;
    box-sizing: border-box;
    // 我的信息
    .mydata {
      background-size: 100%;
      width: 100%;
      background-color: #fff;
      padding: 16px 20px;
      border-radius: 10px;
      box-sizing: border-box;
      display: flex;
      align-items: center;

      img {
        width: 68px;
        height: 68px;
        border-radius: 50%;
        margin-right: 22px;
      }

      .phone {
        color: #4a4a4a;
        font-size: 24px;
      }
    }

    // 订单
    .order {
      width: 100%;
      font-size: 14px;
      background-color: #fff;
      color: #4d4d4d;
      box-sizing: border-box;
      margin-top: 20px;
      padding: 20px;
      border-radius: 10px;
      display: flex;

      a {
        width: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        div {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
        }

        img {
          width: 32px;
          height: 32px;
          margin-bottom: 13px;
        }

        span {
          font-size: 12px;
          color: #9b9b9b;
        }
      }

      a:last-child {
        padding-left: 20px;
        border-left: 0.5px solid rgba(0, 0, 0, .1);
        margin-left: 20px;
      }
    }

    // 退出登录
    .sign-out {
      height: 48px;
      margin-top: 20px;
      color: #3777f7;
      text-align: center;
      background-color: #fff;
      border-radius: 10px;
      width: 100%;
      box-sizing: border-box;
      padding: 15px 20px;
      font-size: 14px;
      display: block;
    }

    // 分组
    .team {
      width: 100%;
      box-sizing: border-box;
      margin-top: 15px;
      padding: 0;
      background-color: #fff;
      border-radius: 10px;
      color: #4a4a4a;
      font-size: 14px;
      overflow: hidden;

      .van-cell--clickable {
        box-sizing: border-box;
        width: 100%;
        padding: 15px 20px;
        overflow: hidden;
        font-size: 14px;
        line-height: 24px;
        background-color: #fff;
        color: #4a4a4a;
        height: 48px;
        align-items: center;
      }
    }

  }
}
</style>